<template>
  <div class="mybox">
    <div class="btmall">
      <div class="btmbg"></div>
      <div class="btmdiv">
        <div class="rouseline">
          <p>重点项目</p>
          <div>其中实施类项目<span style="color: #ffde00;font-weight: 700;font-size: 16px;">40</span>个</div>
        </div>
        <div class="rouseline">
          <p><span style="color: #ffde00;font-weight: 700;font-size: 16px;">879</span>个</p>
          <div>计划投资<span style="color: #ffde00;font-weight: 700;font-size: 16px;">40</span>亿元</div>
        </div>
      </div>
    </div>
    <div class="btmcard">
      <div class="btmbox">
        <div class="toptitle ">开工项目</div>
        <div class="btmdata">
          <div class="btmvalue">22</div>
          <div class="box">个</div>
        </div>
        <div class="centerdata">
          <div class="unit">开工率</div>
          <div class="value">20%</div>
        </div>
      </div>
      <div class="btmbox">
        <div class="toptitle ">重点项目完成投资额</div>
        <div class="btmdata">
          <div class="btmvalue">22</div>
          <div class="box">亿元</div>
        </div>
        <div class="centerdata">
          <div class="unit">占年度计划投资</div>
          <div class="value">70%</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {}
  },
  methods: {

  }
}
</script>
<style lang="scss" scoped>
.mybox {
  padding: 10px 20px !important;
  white-space: nowrap;

  .btmall {
    width: 411px;
    height: 78px;
    display: flex;
    justify-content: space-between;
    height: 77px;
    background: url('./img/5.png');
    padding-top: 10px;
    margin-top: 5px;
    margin-bottom: 20px;

    .btmbg {
      width: 122px;
      height: 62px;
      background: url('./img/6.png')no-repeat center center;
    }


    .btmdiv {
      width: 392px;
      height: 54px;
      // background: url('./img/14.png')no-repeat center center;
      margin: 0 auto;
      padding: 5px 10px 5px 10px;

      .rouseline {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        box-sizing: border-box;

        p {
          width: 64%;
          text-align: left;
          font-family: MicrosoftYaHeiUI;
          font-size: 14px;
          color: #FFFFFF;
          line-height: 22px;
        }

        div {
          text-align: left;
          font-family: MicrosoftYaHeiUI;
          font-size: 14px;
          color: #FFFFFF;
          line-height: 22px;
        }

      }
    }
  }

  .btmcard {
    display: flex;
    justify-content: space-around;


    .btmbox {
      width: 202px;
      height: 112px;
      background: url('../left/img/12.png')no-repeat center center;
      background-size: 100% 100%;
      padding-top: 10px;

      .toptitle {
        text-align: center;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
        margin-bottom: 10px;
      }

      .btmdata {
        display: flex;
        justify-content: center;
        width: 190px;
        height: 33px;
        background: url('../left/img/2.png')no-repeat center center;
        background-size: 100% 100%;
        margin: 0 auto;
        padding-top: 5px;

        .btmtitle {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 14px;
          color: #FFFFFF;
          margin-right: 7px;
        }


      }

      .btmvalue {
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 16px;
        color: #ffde00
      }

      .box {
        font-family: MicrosoftYaHeiUI;
        font-size: 14px;
        color: #FFFFFF;
        text-align: center;
        margin-left: 5px;
        margin-top: 4px;
      }

      .centerdata {
        display: flex;
        justify-content: center;
        margin-top: 10px;

        .value {
          font-family: Microsoft YaHei;
          font-weight: bold;
          font-size: 16px;
          color: #16FDF5;
        }

        .unit {
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 14px;
          color: #F1F1F1;
          margin-right: 5px;
        }
      }
    }

  }
}
</style>
